<template>
  <view class="viewpoint" :style="{ paddingTop: safeAreaInsets!.top + 'px'}">
    <!-- 搜索框 -->
    <view class="search" @tap="search">
      <!-- 输入框 -->
      <view class="input-item" @tap="tosearch">
        <view class="icon"> <text class="iconfont icon-sousuo"></text></view>
        <view class="search_input">
          <text>请输入新闻关键词</text>
        </view>
      </view>
    </view>
    <!-- 发布按钮 -->
    <view class="publish" @tap="publish">
      <text class="iconfont icon-tianjia"></text>
    </view>
  </view>
</template>

<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
//点击输入框
const tosearch = () => {
  console.log(1)
}
//点击发布
const publish = () => {
  uni.navigateTo({ url: '/pages/editor/editor' })
}
//点击搜索
const search = () => {
  uni.navigateTo({ url: '/pages/search/search' })
}
</script>

<style lang="scss">
.viewpoint {
  height: 160rpx;
  width: 100%;
  background-color: #f04142;
  padding: 0 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  .search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    .input-item {
      background-color: #fff;
      height: 70rpx;
      width: 500rpx;
      display: flex;
      border-radius: 10rpx;
      box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
      .icon {
        height: 100%;
        width: 70rpx;
        line-height: 70rpx;
        text-align: center;
        font-weight: bold;
        color: #ccc;
      }
      .search_input {
        flex: 1;
        color: #ccc;
        font-size: 32rpx;
        // text-align: center;
        line-height: 70rpx;
      }
    }
  }
  .publish {
    width: 70rpx;
    height: 70rpx;
    background-color: #fff;
    border-radius: 60rpx;
    text-align: center;
    line-height: 70rpx;

    font-weight: bold;
    color: #f04142;
    margin-right: 40rpx;
    text {
      display: block;
      height: 100%;
      width: 100%;
      font-size: 50rpx;
    }
  }
}
</style>